<!DOCTYPE>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>TABLE转换EXCEL</title>
        <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" ></script>
        <!-- <script src="https://cdn.bootcdn.net/ajax/libs/xlsx/0.16.8/xlsx.full.min.js"></script> -->
        <!-- <script src="https://cdn.bootcdn.net/ajax/libs/xlsx/0.9.9/xlsx.full.min.js"></script> -->

        

       
        <script src="js/xlsx.full.min.max.js"></script>
        <script src="js/export.js"></script>
        <style type="text/css">
          *{padding: 0;margin:0;}
          .btn{
              margin:20px;
          }
          p{
            padding: 0;
            margin:0;
          }
          table {
              border-collapse: collapse;
              border-spacing: 0;
              border: 1px solid #cccccc;
          }
          td,th {
              padding: 0;
              text-align: center;
          }
          .pure-table {
              border-collapse: collapse;
              border-spacing: 0;
              empty-cells: show;
              /* width: 900px;
              overflow-x: scroll; */
              /* padding:10px 10px; */
              /* border: 1px solid #cbcbcb; */
          }
          /* .pure-table >table{
            width: 1200px;
          } */
          .pure-table caption {
              color: #777;
              /* padding: 1em 0; */
              
              text-align: center;
          }
          .pure-table td,.pure-table th {
              border-left: 1px solid #cccccc;
              border-width: 0 0 0 1px;
              font-size: inherit;
              margin: 0;
              overflow: visible;
              font-size: 11.5px;
              /* padding:5px 10px; */
              /* padding: .5em 1em; */
          }
          .pure-table .header{
            background: #edeff1;
          }
          .pure-table tr td{
            padding:7px 0;
            width: 80px;
          }
          .pure-table .header td{
            padding:5px 0;
            color:#8c8d8d;
          }
          .pure-table td.red{
            color:#dd5360
          }
          .pure-table thead {
              background-color: #e0e0e0;
              color: #000;
              text-align: left;
              vertical-align: bottom;
          }
          .pure-table td {
              background-color: transparent;
          }
          .pure-table-bordered td {
              border-bottom: 1px solid #cccccc;
          }
          .pure-table-bordered tbody>tr:last-child>td {
              border-bottom-width: 0;
          }
          #mark{
            width: 20px;
          }
          .mask{
            background:rgba(0, 0, 0, 0.4);
            position: fixed;
            width: 100%;
            height: 100%;
            overflow: hidden;
            top:0;
            left:0;
            z-index: 100;
            display: none;
          }
          .rfm{
            background: #fff;
            width: 600px;
            height: 650px;
            position: absolute;
            top:50px;
            left: calc(50% - 300px);
            overflow-y: scroll;
          }
          .rfm .close{
            position: absolute;
            right: 10px;
            top: 0px;
            font-size: 23px;
            cursor: pointer;
            color: #6c798a;
          }
          .rfm .rfmDiv{
            padding:20px 30px;
          }
          .rfm .rfmDiv .titleName{
            margin-top:15px;
          }
          .rfm .rfmDiv .titleName span{
            border-bottom:1px solid #F61D70;
            font-size: 13px;
            padding:5px 0;
            color: #333;
          }
          .rfm .rfmDiv .introduce{
            margin-top:20px;
            font-size: 12px;
          }
          .rfm .rfmDiv .introduce p{
            line-height: 20px;
          }
          .rfm .rfmDiv table{
            margin:20px 0;
          }
          .rfm .rfmDiv table tr td{
            width: 100px;
          }
        </style>
    </head>
    <body>
        <center>
            <input class="btn" type="button"  value="点击导出">
            <div class="table2excel pure-table pure-table-bordered">
              <table id = 'testTable' border="1">
                <tr class="header">
                    <td rowspan="2">用户类别</td>
                    <td colspan="6" >对比分析</td>
                    <td colspan="5">2019-12-01 至 2020-11-30</td>
                    <td colspan="5">2019-12-01 至 2020-11-30</td>
                </tr>
                <tr class="header">
                  <td>人数变化(人)</td>
                  <td>金额变化(万元)</td>
                  <td>客单变化(元)</td>
                  <td>人数同比(%)</td>
                  <td>金额同比(%)</td>
                  <td>客单价同比(%)</td>
    
                  <td>人数(人)</td>
                  <td>金额(万元)</td>
                  <td>客单价(元)</td>
                  <td>人数同比(%)</td>
                  <td>金额同比(%)</td>
    
                  <td>人数(人)</td>
                  <td>金额(万元)</td>
                  <td>客单价(元)</td>
                  <td>人数同比(%)</td>
                  <td>金额同比(%)</td>
                </tr>
                <tr>
                  <td>高消活跃老客</td>
                  <td class="red">-300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                </tr>
                <tr>
                  <td>低消活跃老客</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                </tr>
                <tr>
                  <td>高消客户</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                </tr>
                <tr>
                  <td>低消客户</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                </tr>
                <tr>
                  <td>高消陈年客户</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                </tr>
                <tr>
                  <td>低消陈年客户</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                </tr>
                <tr>
                  <td>高消过客</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                </tr>
                <tr>
                  <td>流失用户</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                </tr>
                <tr>
                  <td>汇总</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                  <td>300</td>
                </tr>
              </table>
          </div>
        </center>
        <script type="text/javascript">
            $(function() {
              
              console.log(XLSX)
                $(".btn").click(function(){

             
                        let table1 = document.getElementById('testTable');
                        let sheet = XLSX.utils.table_to_sheet(table1);//将一个table对象转换成一个sheet对象
                        // var styleBase = {
                        //   alignment: {
                        //     vertical: 'center',
                        //     }
                        //   };
                        // sheet.A1.s = { font: { sz: 14, bold: true, color: { rgb: "FFFFAA00" } }, fill: { bgColor: { indexed: 64 }, fgColor: { rgb: "FFFF00" } } };
                        // sheet.A2.s = { font: { sz: 14, bold: true, color: { rgb: "FFFFAA00" } }, fill: { bgColor: { indexed: 64 }, fgColor: { rgb: "FFFF00" } } };
                        
                        console.log(sheet,'sheet')
                        openDownloadDialog(sheet2blob(sheet), '文件名'+'.xlsx');



                    // $(".table2excel").table2excel({
                    //     // 不被导出的表格行的CSS class类
                    //      exclude: ".noExl",
                    //     // 导出的Excel文档的名称
                    //     name: "Excel Document Name",
                    //     // Excel文件的名称
                    //     filename: "哈哈哈文件名",
                    //     //文件后缀名 csv
                    //     // fileext: ".xlsx",
                    //     //是否排除导出图片
                    //     exclude_img: true,
                    //     //是否排除导出超链接
                    //     exclude_links: true,
                    //     //是否排除导出输入框中的内容
                    //     exclude_inputs: true
                    // });
                }); 
            });
        </script>
    </body>
</html>